﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="Sample09.aspx.cs" Inherits="DemoWebforms.Sample09" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Content" runat="server">
    <div>
        <h2><asp:Literal ID="title" runat="server" Text="<%$Resources: Highchart, Sample09Title%>"></asp:Literal></h2>
        <p>
            <asp:Literal Text="<%$Resources: Highchart, Sample09Description%>" ID="description" runat="server" />
        </p>
        <center>
            <div class="chartcontainerarea">
                <highcharts:LineChart ID="hcVendas" Width="700" Height="450" runat="server" />
            </div>
        </center>
        <h3><asp:Literal ID="codetitle" runat="server" Text="<%$Resources: Highchart, SubTitleCode%>"></asp:Literal></h3>        
        <div>
            <asp:Image ID="Image1" ImageUrl="/Resources/Images/html.png" AlternateText="<%$Resources: Highchart, LinkCode%>" runat="server" /> <asp:Label ID="HyperLink1" CssClass="linkcode" runat="server" Text="<%$Resources: Highchart, LinkCode%>" />
            <div id="code">
                <p><asp:Literal Text="<%$Resources: Highchart, Sample09CodeComment%>" runat="server" /></p>
                <pre class="brush: xml"><asp:Literal runat="server" Text="<%$Resources: Highchart, Sample09PrecodeAspx%>" /></pre>
            </div>
            <asp:Image ID="Image2" ImageUrl="/Resources/Images/csharp.png" AlternateText="<%$Resources: Highchart, LinkCodeBehind%>" runat="server" /> <asp:Label ID="HyperLink2" CssClass="linkcode" runat="server" Text="<%$Resources: Highchart, LinkCodeBehind%>" />
            <div id="codebehind">                
                <p><asp:Literal Text="<%$Resources: Highchart, Sample09CodeBehindComment%>" runat="server" /></p>
                <pre class="brush: csharp">
                <asp:Literal runat="server" Text="<%$Resources: Highchart, Sample09PrecodeCSharp%>" /></pre>
            </div>
        </div>
    </div>


    <script type="text/javascript">

        /**
        * Experimental Draggable points plugin
        * Revised 2012-02-08
        *
        * On Saving this jsbin, remember to update http://jsfiddle.net/highcharts/AyUbx/
        */
        (function (Highcharts) {
            var addEvent = Highcharts.addEvent,
                each = Highcharts.each;

            Highcharts.Chart.prototype.callbacks.push(function (chart) {

                var container = chart.container,
                    dragPoint,
                    dragY,
                    dragPlotY;

                chart.redraw(); // kill animation (why was this again?)

                addEvent(container, 'mousedown', function (e) {
                    var hoverPoint = chart.hoverPoint;
                    if (hoverPoint && hoverPoint.series.options.draggable) {
                        dragPoint = hoverPoint;
                        dragY = e.pageY;
                        dragPlotY = dragPoint.plotY + (chart.plotHeight - (dragPoint.yBottom || chart.plotHeight));
                    }
                });

                addEvent(container, 'mousemove', function (e) {
                    if (dragPoint) {
                        var deltaY = dragY - e.pageY,
                            newPlotY = chart.plotHeight - dragPlotY + deltaY,
                            newY = dragPoint.series.yAxis.translate(newPlotY, true),
                            series = dragPoint.series;
                        dragPoint.update(newY, false);
                        chart.tooltip.refresh(dragPoint);
                        if (series.stackKey) {
                            chart.redraw();
                        } else {
                            series.redraw();
                        }
                    }
                });

                function drop(e) {
                    if (dragPoint) {
                        var deltaY = dragY - e.pageY,
                            newPlotY = chart.plotHeight - dragPlotY + deltaY,
                            newY = dragPoint.series.yAxis.translate(newPlotY, true);

                        dragPoint.firePointEvent('drop');
                        dragPoint.update(newY);

                        dragPoint = dragY = undefined;
                    }
                }
                addEvent(document, 'mouseup', drop);
                addEvent(container, 'mouseleave', drop);
            });

            /**
            //            * Extend the column chart tracker by visualizing the tracker object for small points
            //            */
            //            var colProto = Highcharts.seriesTypes.column.prototype,
            //        baseDrawTracker = colProto.drawTracker;

            //            colProto.drawTracker = function () {
            //                var series = this;
            //                baseDrawTracker.apply(series);

            //                each(series.points, function (point) {
            //                    point.tracker.attr(point.shapeArgs.height < 3 ? {
            //                        'stroke': 'black',
            //                        'stroke-width': 2,
            //                        'dashstyle': 'shortdot'
            //                    } : {
            //                        'stroke-width': 0
            //                    });
            //                });
            //            };

        })(Highcharts);


    </script>


</asp:Content>
